<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动结构轮播图test</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#tv{
			width: 400px;
			height: 200px;
			margin: 200px auto 10px auto;
			overflow: hidden;
		}
		#tv li{
			width: 400px;
			height: 200px;
			float: left;
			line-height: 200px;
			text-align: center;
			font-weight: 500;
			font-size: 60px;
			list-style: none;
			transition: all 1s;
		}
		.controlDiv{
			width: 100px;
			margin:10px auto;
		}
		.controlUl{
			width: 160px;
			margin:10px auto;
			overflow: hidden;
		}
		.controlUl li{
			width: 10px;
			height: 10px;
			list-style: none;
			background-color: white;
			border: 1px solid #ccc;
			border-radius: 50%;
			margin-right: 10px;
			float: left;
			cursor: pointer;
		}
		.controlUl .active{
			background-color: black;
		}
	</style>
</head>
<body>
	<ul id="tv">
		<li style="background-color: red">1</li>
		<li value="1" style="background-color: orange">2</li>
		<li value="2" style="background-color: yellow">3</li>
		<li value="3" style="background-color: green">4</li>
		<li value="4" style="background-color: skyblue">5</li>
		<li value="5" style="background-color: blue">6</li>
		<li value="6" style="background-color: purple">7</li>
	</ul>
	<ul class="controlUl" id="controlUl">
		<li class="active" value="0" ></li>
		<li value="1" ></li>
		<li value="2" ></li>
		<li value="3" ></li>
		<li value="4" ></li>
		<li value="5" ></li>
		<li value="6" ></li>
	</ul>
	<div class="controlDiv">
		<button id="bt0">上一张</button>
		<button id="bt1">下一张</button>
	</div>
	
	<script>
		let tv=document.getElementById('tv');
		let lis=tv.getElementsByTagName('li')
		let bt0=document.getElementById('bt0');
		let bt1=document.getElementById('bt1');
		let cUl=document.getElementById('controlUl');
		let clis=cUl.getElementsByTagName('li')
		bt1.onclick=function(){
			tv.appendChild(lis[0]);
			cUl.insertBefore(clis[6],clis[0])
			
		}
		bt0.onclick=function(){
			tv.insertBefore(lis[6],lis[0]);
			cUl.appendChild(clis[0]);
		}
		for(var i=0;i<clis.length;i++){
			clis[i].Index=i;
			clis[i].onclick=function(){
				for(var i=0;i<this.Index;i++){
					tv.appendChild(lis[0]);
					cUl.insertBefore(clis[6],clis[0])
				}
			}
		}
	</script>
</body>
</html>